<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    h2,
    p {
        margin: 0;
    }    
    .box {
        margin: 30px auto;
        width: 300px;    
    }
    #user,
    #message {
        box-sizing: border-box;
        width: 300px;
        border: 1px solid #000;
        padding: 10px;
        height: 100px;
        resize: none;
        display: block;
    }
    #user {
        padding: 0 10px;
        height: 30px;
        margin-bottom: 10px;
    }
    #btn {
        display: block;
        margin: 10px auto;
        width: 60%;
        height: 40px;
    }
    #list {
        border-top: 1px solid #000;
        padding: 10px 0 0;
        margin: 0;
        list-style: none;
    }
    #list li {
        position: relative;
        font: 14px/30px "宋体";
        border-bottom: 1px solid #000;
        padding: 0 15px;
        overflow: hidden;
    }
    .clos {
        position: absolute;
        right: 5px;
        top: 10px;
    }
    .clos2 {
        position: absolute;
        right: 5px;
        top: 30px;
    }
    .replay{
        position:absolute;
        right: 5px;
        top: 35px;
    }
    .mask{
        width: 100vw;
        height: 100vh;
        background: black;
        opacity: .3;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    .comfirm{
        width: 200px;
        height: 120px;
        background: white;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 30%;
        border-radius: 5px;
        transform: translate(-50%,-50%);
        overflow: hidden;
        display: none;
        
    }
    .comfirm button{
        /* position: absolute; */
        /* right: 10px; */
        float:right;
        margin-top: 20px;
        margin-right: 10px;
    }
    .replyMsg{
        display: none;
    }
    .replyMsg textarea{
        width: 275px;
        height: 80px;
    }
    
</style>
</head>
<body>
<div class="box">
    <input type="text" id="user" value="小明" />
    <textarea id="message">我就是传说中的无敌小明</textarea>
    <button id="btn">提交留言</button>
    <ul id="list">
        <!-- <li style="height: auto">
            <h2 class="user">小王说:</h2>
            <p>呼叫无敌小明</p>
            
            <a href="javascript:;" class="clos">删除</a>
            <a href="javascript:;" class="clos2">回复</a>
        </li>
        <li style="height: auto">
            <h2 class="user">老师说:</h2>
            <p>小明滚出去</p>
            <p>回复的内容</p>
            <a href="javascript:;" class="clos">删除</a>
        </li> -->
    </ul>
</div>
<script>
    var usernameEle = document.querySelector("#user");
    var contentEle = document.querySelector("#message");
    var btnELe = document.querySelector("#btn");
    var ulEle = document.querySelector("#list");
    btnELe.onclick = function (){
        var user = usernameEle.value;
        var message = contentEle.value; 
        var liEle = document.createElement("li");
        liEle.style.height = "auto" ;
        liEle.innerHTML =   `<h2 class="user">${user}:</h2>
                             <p>${message}</p>
                             <a href="javascript:;" class="clos">删除</a>
                             <a href="javascript:;" class="clos2">回复</a>
                             <div class="replyMsg">
                                <span>回复人</span>
                                <input type="text" style="width=50px">
                                <textarea></textarea>
                                <button>确认</button>
                                <button>取消</button>
                             </div>
                            ` ;
        var delBtn = liEle.querySelector(".clos");
        delBtn.onclick = function(){
            liEle.remove();
        }
        var replyBtn = liEle.querySelector(".clos2");
        var replyMsgEle = liEle.querySelector(".replyMsg");
        var confirmBtn = liEle.querySelector(".replyMsg button:nth-of-type(1)");
        var cancelBtn = liEle.querySelector(".replyMsg button:nth-of-type(2)");
        replyBtn.onclick = function(){
            replyMsgEle.style.display = 'block';
        }
        confirmBtn.onclick = function(){
            var replyUser = liEle.querySelector(".replyMsg input");
            var replyMsg = liEle.querySelector(".replyMsg textarea");
            var secEle = document.createElement("div");
            secEle.innerHTML = ` <h2 class="user">${replyUser.value}:</h2>
                                <p>${replyMsg.value}</p>` ; 
            liEle.insertBefore(secEle,replyMsgEle);
            replyUser.value = '' ;
            replyMsg.value = '' ;
            replyMsgEle.style.display = 'none';
        }
        cancelBtn.onclick = function(){
            replyMsgEle.style.display = 'none';
        }
        ulEle.appendChild(liEle);
    } 
</script>
</body>
</html>